<template>
    <div class="article">
        <van-nav-bar left-arrow @click-left="$router.back()" fixed>
            <!-- 头部 -->
                <template #title>
                    <div class="nav-author" v-show="showNavAuthor">
                    <van-image round width="7vw" height="7vw" :src="article.aut_photo"/>
                    <span class="name">{{article.aut_name}}</span>
                    <span class="line">|</span>
                    <!-- <span class="follow">关注</span> -->
                    <span class="follow" @click="getfollowAuthor" :class="article.is_followed?'un':''">
                        {{article.is_followed?'取消关注': '关注'}}
                    </span>
                    </div>
                </template>
            <template #right>
                <van-icon name="ellipsis" size="5.4vw"></van-icon>
            </template>
        </van-nav-bar>
         <!-- 文章内容详情 -->
         <!-- 文章主体 -->
    <div v-if="!isLoading" class="article-wrapper" @scroll="onscroll" ref="wrapper">
      <!-- 头部：标题 时间 作者 -->
      <div class="header" ref="header">
        <h3 class="title">{{article.title}}</h3>
        <div class="time">
          <span>{{article.pubdate}}</span>
          <span>|</span>
          <span>{{article.read_count}} 阅读</span>
          <span>|</span>
          <span>{{article.comm_count}} 评论</span>
        </div>
        <div class="author van-hairline--bottom">
          <van-image round width="10vw" height="10vw" :src="article.aut_photo"/>
          <span class="name">{{article.aut_name}}</span>
          <!-- <van-button round size="small" color="#FC6627">+ 关注</van-button> -->
           <van-button v-if="article.is_followed" @click="getfollowAuthor()"  round size="small" >取消关注</van-button>
          <van-button v-else  round size="small" @click="getfollowAuthor()" color="#FC6627">+ 关注</van-button>
        </div>
      </div>
      <!-- 内容：文章内容 -->
      <div class="main" v-highlight ref="main">
        <div class="html" v-html="article.content"></div>
        <div class="space"></div>
      </div>
      <!-- 评论：评论组件 -->
      <article-comment :article="article" @click-comment="handlerComment"></article-comment>
    </div>
        <div class="gujia" v-else>
        <van-skeleton title avatar :row="12" />
        </div>
    </div>
</template>
<script>
import { getArticle } from '@/api/article.js'
import { followAuthor } from '@/api/user.js'
import ArticleComment from './components/article-comment.vue'
export default {
  components: {
    ArticleComment
  },
  data () {
    return {
      article: {},
      showNavAuthor: false,
      isLoading: true,
      isShowComment: false
    }
  },
  methods: {
    // 监听子组件的发布事件 跳转到头部或评价区域
    handlerComment () {
      if (!this.isShowComment) {
        const header = this.$refs.header.offsetHeight
        const main = this.$refs.main.offsetHeight
        this.$refs.wrapper.scrollTop = header + main
      } else {
        this.$refs.wrapper.scrollTop = 0
      }
      this.isShowComment = !this.isShowComment
    },
    // 关注或者取消
    async getfollowAuthor () {
      const data = await followAuthor(this.article.aut_id, !this.article.is_followed)
      console.log(data)
      this.article.is_followed = !this.article.is_followed
    },
    // 作者信息吸顶效果
    onscroll () {
      // 1.当滚动高度大于头部组件高度时显示
      if (this.$refs.wrapper.scrollTop > this.$refs.header.offsetHeight) {
        this.showNavAuthor = true
      } else {
        this.showNavAuthor = false
      }
    }
  },
  async created () {
    // console.log(this.$route.query.id)
    const data = await getArticle(this.$route.query.id)
    // console.log(data)
    // 存储数据
    this.article = data
    // 页面渲染完毕执行
    this.$nextTick(() => {
      this.isLoading = false
    })
  }
}
</script>
<style scoped lang="less">
.article-wrapper {
  height: 100%;
  overflow-y: auto;
  padding: 88px 0 100px;
  // 头部
  .header {
    padding: 0 32px;
    .title {
      font-size: 40px;
      font-weight: normal;
      padding: 20px 0;
      margin: 0;
    }
    .time {
      font-size: 24px;
      color: #999;
      span:nth-child(2n) {
        margin: 0 10px;
        color: #ccc;
        position: relative;
        top: -2px;
      }
    }
    .author {
      display: flex;
      align-items: center;
      padding: 20px 0 ;
      .name {
        flex: 1;
        padding-left: 20px;
        font-size: 32px;
      }
    }
  }
  // 内容
  .main {
    .space {
      height: 32px;
      background: @boke-gray-color;
    }
    .html {
        font-size: 32px;
      word-break: break-all;
      width: 100%;
      overflow: hidden;
      padding: 40px 32px;
      /deep/ img {
        max-width:100%;
        background: #f9f9f9;
      }
      /deep/ pre {
        white-space: pre-wrap;
        code {
          white-space: pre;
        }
      }
    }
  }
}
/deep/ .van-nav-bar__title {
   max-width: 400px;
   width: 400px;
}
.nav-author {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  > span {
    font-size: 28px;
    padding-left: 10px;
  }
  .line {
    color: #ccc;
    position: relative;
    top: -2px;
  }
  .follow {
    color: @boke-color;
    &.un {
      color: #999;
    }
  }
}
.article {
  height: 100%;
}
</style>
